<template>
    <div class="page">
        <t-collapse expand-icon-placement="right">
            <t-collapse-panel value="0" header="这是一个折叠标题">
                这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
            </t-collapse-panel>
        </t-collapse>
        <div class="conn">
            <t-table
                row-key="id"
                :height="heights"
                :columns="columns"
                :data="data"
                stripe
                bordered
                hover
                size="small"
                :pagination="pagination"
                :expanded-row-keys="expandedRowKeys"
                :expanded-row="expandedRow"
                :expandIcon="expandIcon"
                :expandOnRowClick="expandOnRowClick"
                table-layout="fixed"
                tableContentWidth="1200"
                @expand-change="rehandleExpandChange"
                ref="refsTable"
            >
                <template #status="{ row }">
                    <p v-if="row.status === 0" class="status">健康</p>
                    <p v-if="row.status === 1" class="status unhealth">异常</p>
                </template>
                <template #op-column><p>操作</p></template>
                <template #op="slotProps">
                    <a class="link" @click="rehandleClickOp(slotProps)">管理</a>
                    <a class="link" @click="rehandleClickOp(slotProps)">删除</a>
                </template>
            </t-table>
        </div>
    </div>
</template>
<script>
const data = [];
const total = 100;
for (let i = 0; i < total; i++) {
    data.push({
        index: i,
        platform: i % 2 === 0 ? '共有' : '私有',
        type: ['String', 'Number', 'Array', 'Object'][i % 4],
        default: ['-', '0', '[]', '{}'][i % 4],
        detail: {
            position: `读取 ${i} 个数据的嵌套信息值`,
        },
        needed: i % 4 === 0 ? '是' : '否',
        description: '数据源',
    });
}
export default {
    name: "index",
    data() {
        return {
            heights: 0,
            data,
            columns: [
                {
                    width: '100',
                    colKey: 'index',
                    title: '序号',
                    // 对齐方式
                    align: 'center',
                    // 设置列类名
                    className: 'custom-column-class-name',
                    // 设置列属性
                    attrs: {
                        'data-id': 'first-column',
                    },
                },
                {
                    width: 100,
                    colKey: 'platform',
                    title: '平台',
                },
                {
                    colKey: 'type',
                    title: '类型',
                },
                {
                    colKey: 'default',
                    title: '默认值',
                },
                {
                    colKey: 'needed',
                    title: '是否必传',
                },
                {
                    colKey: 'detail.position',
                    title: '详情信息',
                    width: 200,
                    /**
                     * 1.内容超出时，是否显示省略号。值为 true，则浮层默认显示单元格内容；
                     * 2.值类型为 Function 则自定义浮层显示内容；
                     * 3.值类型为 Object，则自动透传属性到 Popup 组件。
                     */
                    ellipsis: true,

                    // 透传省略内容浮层 Popup 组件全部特性，示例代码有效，勿删！！！
                    // ellipsis: { placement: 'bottom', destroyOnClose: false },

                    // 完全自定义 ellipsis 浮层的样式和内容，示例代码有效，勿删！！！
                    // ellipsis: (h, {
                    //   row, col, rowIndex, colIndex,
                    // }) => {
                    //   if (rowIndex % 2) {
                    //     return <div>is even row {rowIndex + 1}, with data {row.detail.position}</div>;
                    //   }
                    //   return <div>is odd row {rowIndex + 1}, with data {row.detail.position}</div>;
                    // },
                },
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                size:"small",
                // defaultCurrent: 1,
                // defaultPageSize: 10,
                showJumper: true,
                onChange: (pageInfo) => {
                    console.log('pagination.onChange', pageInfo);
                },
            },
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 根据浏览器高度设置初始高度
            this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 50
            // 监听浏览器高度变化，修改表格高度
            window.onresize = () => {
                this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 50
            }
        })
        // console.log(  "window.innerHeight"+window.innerHeight  );
        // console.log(  "this.$refs.refsTable.$el.offsetTop"+this.$refs.refsTable.$el.offsetTop  );
    },
    methods: {
        changeTableHeight() {
            console.log(123456);
            this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 50
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    border: 0px solid #000;
    height: 100%;
    display: flex;
    flex-flow: column;
    .conn {
        border: 0px solid #000;
        flex: 1;
        display: flex;
        flex-flow: column;
        .ivu-table-wrapper {
            flex: 1;
        }
    }
}
</style>
